<template>
  <div class="p-4">
    <ChartGroupCard class="enter-y" :loading="loading" type="bdc" />
    <BdcTabCard class="!my-4 enter-y" :loading="loading" />
    <Row>
      <Col :span="24">
        <Card :loading="loading" :class="{ 'anty-list-cust': true }" :bordered="false">
          <Tabs v-model:activeKey="indexBottomTab" size="large" :tab-bar-style="{ marginBottom: '24px', paddingLeft: '16px' }">
            <template #rightExtra>
              <div class="extra-wrapper">
                <RadioGroup v-model:value="indexRegisterType" @change="changeRegisterType">
                  <RadioButton value="转移登记">转移登记</RadioButton>
                  <RadioButton value="抵押登记">抵押登记</RadioButton>
                  <RadioButton value="">所有</RadioButton>
                </RadioGroup>
              </div>
            </template>

            <TabPane tab="业务流程限时监管" key="1">
              <Table
                :dataSource="dataSource"
                size="default"
                rowKey="reBizCode"
                :columns="table.columns"
                :pagination="ipagination"
                @change="tableChange"
              >
                <template #flowRate="{ text, record, index }">
                  <Progress
                    :strokeColor="getPercentColor(record.flowRate)"
                    :format="getPercentFormat"
                    :percent="getFlowRateNumber(record.flowRate)"
                    style="width: 80px"
                  />
                </template>
              </Table>
            </TabPane>

            <TabPane loading="true" tab="业务节点限时监管" key="2">
              <Table
                :dataSource="dataSource1"
                size="default"
                rowKey="reBizCode"
                :columns="table1.columns"
                :pagination="ipagination1"
                @change="tableChange1"
              >
                <template #flowRate="{ text, record, index }">
                  <span style="color: red">{{ record.flowRate }}小时</span>
                </template>
              </Table>
            </TabPane>
          </Tabs>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
import { Progress, Row, Col, Card, Tabs, TabPane, RadioGroup, RadioButton, Table } from 'ant-design-vue';
import ChartGroupCard from '../components/ChartGroupCard.vue';
import BdcTabCard from '../components/BdcTabCard.vue';
import { table, table1 } from '../data';

const loading = ref(true);

setTimeout(() => {
  loading.value = false;
}, 500);

const indexBottomTab = ref('1');
const indexRegisterType = ref('转移登记');
const dataSource = ref([]);
const dataSource1 = ref([]);
const ipagination = ref(table.ipagination);
const ipagination1 = ref(table1.ipagination);

function changeRegisterType(e) {
  indexRegisterType.value = e.target.value;
  if (unref(indexBottomTab) == '1') {
    loadDataSource();
  } else {
    loadDataSource1();
  }
}

function tableChange(pagination) {
  ipagination.value.current = pagination.current;
  ipagination.value.pageSize = pagination.pageSize;
  loadDataSource();
}

function tableChange1(pagination) {
  ipagination1.value.current = pagination.current;
  ipagination1.value.pageSize = pagination.pageSize;
  loadDataSource1();
}

function getFlowRateNumber(value) {
  return +value;
}

function getPercentFormat(value) {
  if (value == 100) {
    return '超时';
  } else {
    return value + '%';
  }
}

function getPercentColor(value) {
  let p = +value;
  if (p >= 90 && p < 100) {
    return 'rgb(244, 240, 89)';
  } else if (p >= 100) {
    return 'red';
  } else {
    return 'rgb(16, 142, 233)';
  }
}

function loadDataSource() {
  dataSource.value = table.dataSource.filter(item => {
    if (!unref(indexRegisterType)) {
      return true;
    }
    return item.type == unref(indexRegisterType);
  });
}

function loadDataSource1() {
  dataSource1.value = table1.dataSource.filter(item => {
    if (!unref(indexRegisterType)) {
      return true;
    }
    return item.type == unref(indexRegisterType);
  });
}

loadDataSource();
loadDataSource1();
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.item-group {
  padding: 20px 0 8px 24px;
  font-size: 0;

  a {
    color: rgba(0, 0, 0, 0.65);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 13px;
    width: 25%;
  }
}

.item-group {
  .more-btn {
    margin-bottom: 13px;
    text-align: center;
  }
}

.list-content-item {
  color: rgba(0, 0, 0, 0.45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
}

@media only screen and (min-width: 1600px) {
  .list-content-item {
    margin-left: 60px;
  }
}

@media only screen and (max-width: 1300px) {
  .list-content-item {
    margin-left: 20px;
  }

  .width-hidden4 {
    display: none;
  }
}

.list-content-item {
  span {
    line-height: 20px;
  }
}

.list-content-item {
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}

.anty-list-cust {
  .ant-list-item-meta {
    flex: 0.3 !important;
  }
}

.anty-list-cust {
  .ant-list-item-content {
    flex: 1 !important;
    justify-content: flex-start !important;
    margin-left: 20px;
  }
}
</style>
